<!--
 * @Author: doing
 * @Date: 2023-08-22 21:06:32
 * @LastEditors: git config user.name && git config user.email
 * @LastEditTime: 2023-08-26 22:26:42
 * @FilePath: \authentication-center\src\pages\Login.vue
 * @Description: 
 * 登录页面路由组件
 * Copyright (c) 2023 by 1540265624@qq.com, All Rights Reserved. 
-->
<template>
  <div class="card">
    <section :class="wrapper">
      <div class="form signup">
        <header @click="SignUp">注册</header>
        <form @submit.prevent="registerFn">
          <input type="text" placeholder="请输入用户名" required v-model="RegisterForm.username" />
          <input type="password" placeholder="请输入密码" required v-model="RegisterForm.password" />
          <input type="password" placeholder="请再一次输入密码" required v-model="RegisterForm.repassword" />
          <div class="checkbox">
            <input type="checkbox" id="signupCheck" v-model="isChecked" />
            <label for="signupCheck">我已经阅读并同意<a href="https://baidu.com" target="_blank"
                style="color: #FF4500;">《用户协议》</a></label>
          </div>
          <div style="position: relative;">
            <register-loading id="loadingRe" v-show="isRegisterLoading"></register-loading>
            <input type="submit" value="注册" :disabled="isDisabled" class="btn" />
          </div>
        </form>
      </div>
      <div class="form login">
        <header @click="Login">登录</header>
        <form @submit.prevent="loginFn">
          <input type="text" placeholder="请输入用户名" required v-model="LoginForm.username" />
          <input type="password" placeholder="请输入密码" required v-model="LoginForm.password" />
          <div style="position: relative;">
            <login-loading id="loadingLo" v-show="isLoginLoading"></login-loading>
            <input type="submit" value="登录" class="btn"/>
          </div>
        </form>
      </div>
    </section>
    <toast-message ref="toastRef"></toast-message>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { PcCookie, Key } from '~/utils/cookie'
import LoginLoading from '~/components/LoginLoading.vue'
import RegisterLoading from '~/components/RegisterLoading.vue'
import ToastMessage from '~/components/ToastMessage.vue'
import {
  login,
  register,
  isRegister
} from '~/api/auth.js'

const wrapper = ref(['wrapper'])
const isChecked = ref(false)
const redirectURL = 'http://localhost:5000/'
const isDisabled = ref(false)
const isLoginLoading = ref(false)
const isRegisterLoading = ref(false)
const toastRef = ref(null)

const LoginForm = reactive({})
const RegisterForm = reactive({})


const loginFn = async function () {
  isLoginLoading.value = true
  isDisabled.value = true
  const data = {...LoginForm}
  console.log('发送的数据为:')
  console.log(data)
  const formData = new FormData();
  formData.append('username', data.username);
  formData.append('password', data.password);
  await login(formData).then(res => {
    console.log(res)
    const { userInfo, access_token, refresh_token, expires_in } = res.data
    console.log(userInfo)
    if (res.code === 20000) {
      PcCookie.set(Key.userInfoKey, JSON.stringify(userInfo), expires_in)
      PcCookie.set(Key.accessTokenKey, access_token, expires_in)
      PcCookie.set(Key.refreshTokenKey, refresh_token, expires_in)
      toastRef.value.show('success', '登录成功');
      resetFileds(LoginForm)
      resetFileds(RegisterForm)
      isLoginLoading.value = false
      // 跳转回来源页面
      window.location.href = redirectURL
    }else{
      toastRef.value.show('warning', res.message);
    }
  }).catch(err => {
    console.log(err)
    toastRef.value.show('warning', '出现异常');
  })
}

const registerFn = async function () {
  if (isChecked.value) {
    const data = {...RegisterForm}
    isRegisterLoading.value = true
    isDisabled.value = true
    if(data.password !== data.repassword){
      toastRef.value.show('warning', '新旧密码不一致');
      isRegisterLoading.value = false
      isDisabled.value = false
      return
    }
    console.log('发送的数据为:')
    console.log(data)
    await register(data).then(res => {
      if (res.code === 20000) {
        toastRef.value.show('success', '注册成功');
        resetFileds(LoginForm)
        resetFileds(RegisterForm)
        isRegisterLoading.value = false
        isDisabled.value = false
        wrapper.value.push('active')
      }else{
        toastRef.value.show('warning', res.message);
      }
    }).catch(err=>{
      toastRef.value.show('warning', '出现异常');
    })
  }
}


const Login = function () {
  wrapper.value.push('active')
}

const SignUp = function () {
  if (wrapper.value.includes('active')) {
    wrapper.value.pop('active')
  }
}

//清除表单
const resetFileds = function (data) {
  Object.keys(data).forEach((key) => {
    delete data[key]
  });
}

</script>

<style scoped>
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins",
    sans-serif;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0faff;
}

.wrapper {
  position: relative;
  max-width: 470px;
  width: 100%;
  border-radius: 12px;
  padding: 20px 30px 120px;
  background: #4070f4;
  box-shadow: 0 5px 10px rgba(0,
      0,
      0,
      0.1);
  overflow: hidden;
}

.form.login {
  position: absolute;
  left: 50%;
  bottom: -86%;
  transform: translateX(-50%);
  width: calc(100% + 220px);
  padding: 20px 140px;
  border-radius: 50%;
  height: 100%;
  background: #fff;
  transition: all 0.6s ease;
}

.wrapper.active .form.login {
  bottom: -15%;
  border-radius: 35%;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
}

.form header {
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.form.login header {
  color: #333;
  opacity: 0.6;
}

.wrapper.active .form.login header {
  opacity: 1;
}

.wrapper.active .signup header {
  opacity: 0.6;
}

.wrapper form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

form input {
  height: 60px;
  outline: none;
  border: none;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  border-radius: 8px;
  background: #fff;
}

.form.login input {
  border: 1px solid #aaa;
}

.form.login input:focus {
  box-shadow: 0 1px 0 #ddd;
}

form .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox input[type="checkbox"] {
  height: 16px;
  width: 16px;
  accent-color: #fff;
  cursor: pointer;
}

form .checkbox label {
  cursor: pointer;
  color: #fff;
}

form a {
  color: #333;
  text-decoration: none;
}

form a:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  margin-top: 15px;
  padding: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.btn:hover {
  background: #ccc;
}

.form.login input[type="submit"] {
  background: #4070f4;
  color: #fff;
  border: none;
}
.form.login input[type="submit"]:hover{
  background: #2952a3 !important;
}

#loadingLo {
  position: absolute;
  top: 15px;
  right: 75px;
}

#loadingRe {
  position: absolute;
  color: #333 !important;
  top: 15px;
  right: 75px;
}
</style>
